import React, { useState, useImperativeHandle, useEffect } from 'react';
import './addCreateActivity.less';
import {
  Form,
  Input,
  Cascader,
  DatePicker,
  Upload,
  Button,
  Space,
  Collapse,
} from 'antd';
import {
  LoadingOutlined,
  PlusOutlined,
  MinusCircleOutlined,
  CloseCircleOutlined,
  CaretRightOutlined,
  CaretUpOutlined,
} from '@ant-design/icons';
import { isTemplateMiddle } from 'typescript';
function ApplyActive(props, ref) {
  const { RangePicker } = DatePicker;
  const { Panel } = Collapse; //2
  const [chooseTag, setChooseTag] = useState([
    { id: 1, name: '姓名', infoShow: false },
    { id: 2, name: '性别', infoShow: false },
    { id: 3, name: '图片', infoShow: false },
    { id: 4, name: '手机号', infoShow: false },
    { id: 5, name: '生日', infoShow: false },
    { id: 6, name: 'QQ号', infoShow: false },
    { id: 7, name: '邮箱', infoShow: false },
    { id: 8, name: '邮箱', infoShow: false },
    { id: 9, name: '学院', infoShow: false },
    { id: 10, name: '年级', infoShow: false },
    { id: 11, name: '班级', infoShow: false },
    { id: 12, name: '学号', infoShow: false },
    { id: 13, name: '特长', infoShow: false },
    { id: 14, name: '备注', infoShow: false },
  ]);
  const [applyForm] = Form.useForm();
  const moment = require('moment');

  useImperativeHandle(ref, () => {
    return {
      nextChoose() {
        let y = props.allData.filter((item) => {
          return item.activityType == 1;
        })[0];
        if (y) {
          let g = y.optionalEntryForms.map((item) => ({
            dayName: item.value,
          }));
          // console.log(g);

          // console.log(y.optionalEntryForms);
          // console.log(y.requiredEntryForm.toString().match(/\d/g));
          let k = y.requiredEntryForm.toString().match(/\d/g);

          k = k.map(Number);
          applyForm.setFieldsValue({
            applyActivityTime: [moment(y?.startDate), moment(y?.endDate)],
            applyPeopleCount: y?.numberLimit,
            applyName: g,
          });
          // k.forEach((item) => {
          //   chooseBtnClick(Number(item)); //   chooseBtnClick(1);
          // });
          chooseTag.forEach((item) => {
            if (k.indexOf(item.id) !== -1) {
              item.infoShow = true;
            }
          });
        }
      },
      sonsClick() {
        applyForm.validateFields().then(() => {
          let f = applyForm?.getFieldValue().applyName?.map((item, index) => {
            return { key: index, value: item.dayName };
          });
          let t1 = chooseTag?.filter((item) => {
            return item.infoShow == true;
          });
          let t = t1?.map((item) => {
            return {
              key: item.name,
              value: item.id,
            };
          });
          // console.log(t);
          // let t = [{ key: '姓名', value: 1 }];
          let startDate = moment(
            applyForm?.getFieldValue()?.applyActivityTime[0],
          ).format('YYYY-MM-DD HH:mm');
          let endDate = moment(
            applyForm?.getFieldValue()?.applyActivityTime[1],
          ).format('YYYY-MM-DD HH:mm');
          let h = {};
          h.numberLimit = applyForm?.getFieldValue().applyPeopleCount;
          h.activityType = 1;
          h.startDate = startDate;
          h.endDate = endDate;
          h.requiredEntryForms = t;
          h.optionalEntryForms = f;
          // props.allClick(h);
          return h;
        });
      },
    };
  });

  function expandIcon(panelProps) {
    if (panelProps.isActive) {
      return (
        <div>
          收起
          <CaretUpOutlined />
        </div>
      );
    } else {
      return (
        <div>
          展开
          <CaretRightOutlined />
        </div>
      );
    }
  }

  function chooseBtnClick(e) {
    let arr4 = chooseTag.map((item) => {
      if (item.id == e) {
        item.infoShow = !item.infoShow;
      }
      return item;
    });
    // console.log(arr4);
    setChooseTag(arr4);
  }
  return (
    <div>
      <Collapse expandIconPosition="right" expandIcon={expandIcon}>
        <Panel key="1" header="报名">
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '20px',
            }}
          >
            <div className="title-icos"></div>
            <div className="title-name">基本信息</div>
          </div>

          <Form name="apply" form={applyForm}>
            <div className="title-box">
              <Form.Item
                name="applyActivityTime"
                label="活动时间"
                rules={[
                  {
                    required: true,
                    message: '请输入活动时间',
                  },
                ]}
              >
                <RangePicker
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: '400px', marginRight: '300px' }}
                />
              </Form.Item>
              <Form.Item label="报名人数" name="applyPeopleCount">
                <Input style={{ width: '400px' }} placeholder="不填即无限制" />
              </Form.Item>
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                marginTop: '20px',
                marginBottom: '20px',
              }}
            >
              <div className="title-icos"></div>
              <div>选择你希望活动者所填写的信息</div>
            </div>
            <div className="title-all">
              <div className="title-list">
                {chooseTag.map((item) => {
                  return (
                    <div
                      className={item.infoShow ? 'choose-btn1' : 'choose-btn'}
                      key={item.id}
                      onClick={() => {
                        chooseBtnClick(item.id);
                      }}
                    >
                      {item.name}
                    </div>
                  );
                })}
              </div>
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                marginTop: '20px',
                marginBottom: '20px',
              }}
            >
              <div className="title-icos"></div>
              <div> 可添加补充项目</div>
            </div>
            <Form.List name="applyName">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }) => (
                    <Space
                      key={key}
                      style={{ display: 'flex', marginBottom: 8 }}
                      align="baseline"
                    >
                      <Form.Item
                        // {...restField}
                        name={[name, 'dayName']}
                      >
                        <Input placeholder="请输入日程名称" />
                      </Form.Item>
                      <MinusCircleOutlined onClick={() => remove(name)} />
                    </Space>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                    >
                      Add field
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
          </Form>
        </Panel>
      </Collapse>
    </div>
  );
}
export default React.forwardRef(ApplyActive);
